//binding接口
interface IBinding {
  value: IConfig;
  oldValue: IConfig | undefined;
  //其他不确定的配置写法
  [key: string]: any;
}

//binding.value的接口
interface IConfig {
  activeCLass: string;
  className: string;
  curIdx: number;
}

export default {
  //挂载后
  //{value, oldValue} = binding
  mounted(el: HTMLElement, { value }: IBinding) {
    const { activeCLass, className, curIdx } = value;
    const oNavItem: HTMLCollection = el.getElementsByClassName(className);

    //给当前index的项元素增加active样式
    oNavItem[curIdx].className += ` ${activeCLass}`;
  },
  //更新后
  updated(el: HTMLElement, { value, oldValue }: IBinding) {
    const { activeCLass, className, curIdx } = value;
    const oNavItem: HTMLCollection = el.getElementsByClassName(className);

    //oldValue时更新前的值
    /**
     * oldValue有可能是undefined所以去curIdx就有可能报错
     * 通过 ! 跟ts编译器说我这里的oldValue肯定有值
     * oldValue! 确保有值 时拿到上次的curIdx
     */
    const oldCurIdx: number = oldValue!.curIdx;

    oNavItem[oldCurIdx].className = `${className}`;
    oNavItem[curIdx].className += ` ${activeCLass}`;
  }
};
